<template>
  <el-table :data="tableData" v-loading="loading" :row-class-name="tabRowClassName">
    <el-table-column
      prop="date">
      <template slot="header">
        <span class="header">
          提醒日期
        </span>
      </template>
      <template slot-scope="scope">
        <span class="column" :class="{ darkColumn:scope.row.index%2===0}">
          {{ formatDate(scope.row.date) }}
        </span>
      </template>>
    </el-table-column>
    <el-table-column
      prop="business">
      <template slot="header">
        <span class="header">
          任务类型
        </span>
      </template>
      <template slot-scope="scope">
        <span class="column" :class="{ darkColumn:scope.row.index%2===0}">
          临时工作提醒
        </span>
      </template>
    </el-table-column>
    <el-table-column
      prop="who_to_notice">
      <template slot="header">
        <span class="header">
          提醒对象
        </span>
      </template>
      <template slot-scope="scope">
        <span class="column" :class="{ darkColumn:scope.row.index%2===0}">
          {{ scope.row.who_to_notice }}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      prop="title">
      <template slot="header">
        <span class="header">
          任务内容
        </span>
      </template>
      <template slot-scope="scope">
        <span class="column" :class="{ darkColumn:scope.row.index%2===0}">
          {{ scope.row.title }}
        </span>
      </template>
    </el-table-column>
    <el-table-column>
      <template slot-scope="scope">
        <el-button type="primary" @click="tempConfer(scope.row.subid)" class="smallBtn">
          确认
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import request from '../../../network/request'

export default {
  name: 'tempNoticeGrid',
  data () {
    return {
      userId: JSON.parse(window.localStorage.getItem('user')).value.userId,
      tableData: [],
      loading: true
    }
  },
  inject: ['reload'],
  methods: {
    tabRowClassName ({ row, rowIndex }) {
      row.index = rowIndex
    },
    tempConfer (id) {
      request({
        url: 'notice/confertempnotice',
        method: 'post',
        params: {
          randomID: this.userId,
          subid: id
        }
      }).then(() => {
        this.reload()
      })
    },
    formatDate (date) {
      return date.split('.')[0].replace('T', ' ')
    }
  },
  created () {
    var _this = this
    // const loading = this.$loading({
    //   lock: true, // 同v-loading的修饰符
    //   text: 'tip.loading', // 加载文案
    //   background: 'rgba(0,0,0,0.4)', // 背景色
    //   spinner: 'el-icon-loading', // 加载图标
    //   target: document.querySelector('.el-table__body')// loading需要覆盖的DOM节点，默认为body
    // })
    request({
      url: 'notice/getnotices',
      method: 'post',
      params: {
        randomID: this.userId
      }
    }).then(res => {
      const tableContent = res.data.data
      _this.tableData = tableContent.temp === null ? [] : tableContent.temp
      // loading.close()
      _this.loading = false
    })
  }
}
</script>

<style scoped>
  .el-table {
    width: 100%;
    height: 100%;
  }
  .header {
    color: #e5e9f2;
    line-height: 50px;
  }
  .column {
    line-height: 50px;
    border: 0;
  }
  .el-table .darkColumn {
    color: #e3ffff;
  }
  >>> .cell {
    font-size: 1.25em;
  }
  .smallBtn {
    width: 120px;
    font-size: 1em;
    /*margin-left: 80px;*/
  }
  >>> .el-table__header th, >>> .el-table__row td {
    border: 0;
  }
  div:before{
    display: none;
  }
</style>
